import React, { Component } from 'react'
import { Table, Divider, Button, Modal, Input, message, Popconfirm } from 'antd'
import store from '../store'

export default class Crud extends Component {
    state = {
        // 查找
        val: "",
        // 控制增加弹框是否显示
        visible: false,
        // 控制编辑弹框是否显示
        visibleEdit: false,
        // 增加弹框内的表单信息
        form: {
            name: '',
            acronym: '',
            article: ''
        },
        // 编辑弹框的表单信息
        formEdit: {},
        // Table表头
        columns: [
            {
                title: '名称',
                dataIndex: 'name',
                key: 'name',
                render: text => <a>{text}</a>,
            },
            {
                title: '缩写',
                dataIndex: 'acronym',
                key: 'age',
            },
            {
                title: '文章',
                dataIndex: 'article',
                key: 'address',
            },
            {
                title: '操作',
                key: 'action',
                render: (text, record, index) => (
                    <span>
                        <Button onClick = {() => {
                            this.showEite(text)
                        }} type="primary">编辑</Button>
                        <Divider type="vertical" />
                        {/* 气泡确认框 */}
                        <Popconfirm
                            title="您确定要删除么？"
                            // 点击确定执行的事件
                            onConfirm={ () => {
                                this.confirm(index)
                            } }
                            // 点击取消执行的事件
                            onCancel={ this.cancel }
                            okText="确定"
                            cancelText="取消"
                        >
                            <Button danger type="primary">删除</Button>
                        </Popconfirm>
                    </span>
                )
            }
        ]
    }
    confirm = (index) => {
        this.del(index)
        message.success('删除成功');
    }

    cancel = (e) => {
        message.error('取消删除');
    }
    // 删除列表里的内容
    del = (index) => {
        store.dispatch({ type: "DEL_DATA_ITEM", index })
        this.setState({})
    }
    //  控制增加弹框上的事件
    showModal = () => {
        this.setState({
            visible: true
        })
    }
    // 点击新增弹框的确定按钮
    handleOk = e => {
        this.state.form.key = String(Math.random()).slice(6, 10)
        // 派发任务告诉reducer
        store.dispatch({ type: "ADD_DATA_ITEM", list: this.state.form })
        this.setState({
            visible: false,
            form: {}
        }, () => {
            message.success('添加成功')
        })
    }
    handleCancel = e => {
        this.setState({
            visible: false
        })
    }
    // 显示编辑弹框
    showEite = (formEdit) => {
        this.setState({
            visibleEdit: true,
            formEdit
        })
    }
    // 点击编辑弹框的确定按钮
    handleEditOk = e => {
        store.dispatch({ type: "EDIT_ITEM", item: this.state.formEdit })
        this.setState({
            visibleEdit: false
        }, () => {
            message.success('编辑成功')
        })
    }
    handleEditCancel = e => {
        this.setState({
            visibleEdit: false
        })
    }
    // 模糊搜索
    search = (ev) => {
        this.setState({
            val: ev.target.value
        }, () => {
            store.dispatch({ type: "SEARCH_VAL", val: this.state.val})
            this.setState({})
        })
    }
    render() {
        const { form, formEdit, val } = this.state
        return (
            <div>
                {/* 增加弹框 */}
                <div>
                    <Button type="primary" onClick={this.showModal}>
                        增加
                    </Button>
                    <Modal
                        title="新增内容"
                        visible={this.state.visible}
                        onOk={this.handleOk}
                        onCancel={this.handleCancel}
                    >
                        <p className="curd-list">
                            <span>
                                名称：
                            </span>
                            <Input value={form.name} onChange={(ev) => {
                                let form = { ...this.state.form }
                                form.name = ev.target.value
                                this.setState({ form })
                            }} />
                        </p>
                        <p className="curd-list">
                            <span>
                                缩写：
                            </span>
                            <Input value={form.acronym} onChange={(ev) => {
                                let form = { ...this.state.form }
                                form.acronym = ev.target.value
                                this.setState({ form })
                            }} />
                        </p>
                        <p className="curd-list">
                            <span>
                                数量：
                            </span>
                            <Input value={form.article} onChange={(ev) => {
                                let form = { ...this.state.form }
                                form.article = ev.target.value
                                this.setState({ form })
                            }} />
                        </p>
                    </Modal>
                </div>
                {/* 查找 */}

                <Input value = { val } onChange = {(ev) => {
                    this.search(ev)
                }}/>
                {/* <Input value = { val } onInput = {() => {
                    console.log(123)
                }}/> */}


                {/* 编辑弹框 */}
                <div>
                    <Modal
                        title="编辑内容"
                        visible={this.state.visibleEdit}
                        onOk={this.handleEditOk}
                        onCancel={this.handleEditCancel}
                    >
                        <p className="curd-list">
                            <span>
                                名称：
                            </span>
                            <Input value={formEdit.name} onChange={(ev) => {
                                let formEdit = { ...this.state.formEdit }
                                formEdit.name = ev.target.value
                                this.setState({ formEdit })
                            }} />
                        </p>
                        <p className="curd-list">
                            <span>
                                缩写：
                            </span>
                            <Input value={formEdit.acronym} onChange={(ev) => {
                                let formEdit = { ...this.state.formEdit }
                                formEdit.acronym = ev.target.value
                                this.setState({ formEdit })
                            }} />
                        </p>
                        <p className="curd-list">
                            <span>
                                数量：
                            </span>
                            <Input value={formEdit.article} onChange={(ev) => {
                                let formEdit = { ...this.state.formEdit }
                                formEdit.article = ev.target.value
                                this.setState({ formEdit })
                            }} />
                        </p>
                    </Modal>
                </div>

                {/* 表格 */}
                <Table columns={this.state.columns} dataSource={store.getState().data} />
            </div>
        )
    }
}
